import React, { useState } from 'react';
import '../index.css';

const CurrencyConverter = () => {
  const [inputValue, setInputValue] = useState('');
  const [fromCurrency, setFromCurrency] = useState<'CNY' | 'USD' | 'HKD'>('CNY');
  const [toCurrency, setToCurrency] = useState<'CNY' | 'USD' | 'HKD'>('USD');
  
  // 汇率数据（示例汇率，需根据实际情况更新）
  const exchangeRates: Record<'CNY' | 'USD' | 'HKD', Record<'CNY' | 'USD' | 'HKD', number>> = {
    CNY: { CNY: 1, USD: 0.138, HKD: 1.075 },
    USD: { CNY: 7.24, USD: 1, HKD: 7.75 },
    HKD: { CNY: 0.93, USD: 0.13, HKD: 1 }
  };

  const handleConvert = () => {
    const value = parseFloat(inputValue);
    if (!isNaN(value)) {
      return value * exchangeRates[fromCurrency][toCurrency];
    }
    return 0;
  };

  return (
    <div className="calculator-container bg-white p-6 rounded-lg shadow-md max-w-md mx-auto">
      <h1 className="calculator-title text-2xl font-bold mb-6 text-gray-800">汇率转换器</h1>
      
      <div className="flex items-center gap-3 mb-4">
        <div className="form-group flex-1">
          <input
            type="number"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            className="form-input w-full p-2 border border-gray-300 rounded focus:ring-2 focus:ring-blue-500 focus:border-transparent"
            placeholder="输入金额"
          />
        </div>

        <div className="form-group">
          <select
            value={fromCurrency}
            onChange={(e) => setFromCurrency(e.target.value as 'CNY' | 'USD' | 'HKD')}
            className="form-input p-2 border border-gray-300 rounded bg-white focus:ring-2 focus:ring-blue-500"
          >
            <option value="CNY">人民币</option>
            <option value="USD">美元</option>
            <option value="HKD">港元</option>
          </select>
        </div>

        <button
          onClick={() => {
            const temp = fromCurrency;
            setFromCurrency(toCurrency);
            setToCurrency(temp);
          }}
          className="submit-button px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
        >
          ⇅
        </button>

        <div className="form-group">
          <select
            value={toCurrency}
            onChange={(e) => setToCurrency(e.target.value as 'CNY' | 'USD' | 'HKD')}
            className="form-input p-2 border border-gray-300 rounded bg-white focus:ring-2 focus:ring-blue-500"
          >
            <option value="USD">美元</option>
            <option value="CNY">人民币</option>
            <option value="HKD">港元</option>
          </select>
        </div>
      </div>

      <div className="result-container mt-4 p-4 bg-gray-50 rounded">
        <output className="font-bold text-xl text-blue-600">
          {handleConvert().toFixed(2)}
        </output>
      </div>
    </div>
  );
};

export default CurrencyConverter;
